<template>
  <div class="add_design table-theme">
    <head-title :title="type === 'add' ?'添加设计师':'编辑设计师'"></head-title>
    <el-card>
      <el-form
       class="form"
        :model="infoForm"
        :rules="infoFormRules"
        ref="infoForm"
        label-width="120px"
      >
        <el-form-item label="姓名:" prop="name">
          <el-input
            v-model="infoForm.name"
            placeholder="请输入设计师姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="擅长风格:" prop="style_name">
          <el-input
            v-model="infoForm.style_name"
            placeholder="多个风格用英文的逗号','隔开"
          ></el-input>
        </el-form-item>
        <el-form-item label="大图:" v-if="type !== 'details' " prop="image">
          <el-upload
            class="avatar-uploader"
            ref="upload"
            action="fakeaction"
            :show-file-list="false"
            :http-request=" function (res) { return upload('big',res); } "
            multipleaccept="image/*"
          >
            <img v-if="infoForm.image" :src="infoForm.image" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-button type="danger" size="small" @click="reset('image')" v-if="infoForm.image">重置</el-button>
          <div class="el-upload__tip">小于1MB</div>
        </el-form-item>
        <el-form-item label="大图:" v-else>
           <img v-if="infoForm.image" :src="infoForm.image" class="avatar" />
        </el-form-item>
        <el-form-item label="中图:" v-if="type !== 'details' " prop="image_middle">
          <el-upload
            class="avatar-uploader"
            ref="upload"
            action="fakeaction"
            :show-file-list="false"
            :http-request=" function (res) { return upload('centre',res); } " multipleaccept="image/*"
          >
            <img
              v-if="infoForm.image_middle"
              :src="infoForm.image_middle"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-button  type="danger" size="small" @click="reset('image_middle')" v-if="infoForm.image_middle">重置</el-button>
          <div class="el-upload__tip">小于1MB</div>
        </el-form-item>
        <el-form-item label="中图:" v-else>
          <img
              v-if="infoForm.image_middle"
              :src="infoForm.image_middle"
              class="avatar"
            />
        </el-form-item>
        <el-form-item label="设计师图片:" prop="viceImagess" v-if="type !== 'details' ">
          <div class="vice-image">
            <div class="item-image" v-if="infoForm.viceImagess.length > 0" v-for="(item,index) in infoForm.viceImagess" :key="index">
              <el-image
              class="avatar"
              :src="item"
              fit="cover">
              </el-image>
              <i class="el-icon-error" @click="onDelImage(index)" v-if="type !== 'details' "></i>
            </div>
              <el-upload
              v-if="type !== 'details' "
              class="avatar-uploader"
              ref="upload"
              action="fakeaction"
              :show-file-list="false"
              :http-request=" function (res) { return upload('stylist',res); } "
              multipleaccept="image/*"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="el-upload__tip">小于1MB</div>
        </el-form-item>
        <el-form-item label="设计师图片:" prop="viceImagess" v-else>
           <div style="display:flex;flexWrap:wrap">
             <el-image
              class="avatar"
              :src="item.image"
              v-for="(item,index) in infoForm.image_list"
              :key="index"
              fit="cover">
              </el-image>
           </div>
        </el-form-item>
        <el-form-item label="简介:">
          <el-input
            v-model="infoForm.brief"
            type="textarea"
            :rows="3"
            placeholder="请输入简介"
          ></el-input>
        </el-form-item>
        <el-form-item label="等级:">
          <el-input v-model="infoForm.code" placeholder="如:高级设计师"></el-input>
        </el-form-item>
        <el-form-item label="排序:">
          <el-input v-model="infoForm.sort" placeholder="数字越大，排序越靠前(默认为0)"></el-input>
        </el-form-item>
        <el-form-item label="店铺ID:" prop="store_id">
          <el-input v-model="infoForm.store_id" :disabled="is_disabled" placeholder="请输入店铺ID"></el-input>
        </el-form-item>
        <el-form-item label="状态:" prop="status">
          <el-radio v-model="infoForm.status" :label="1">上架</el-radio>
          <el-radio v-model="infoForm.status" :label="2">下架</el-radio>
        </el-form-item>
        <el-form-item label="案例" v-if="type !== 'details' ">
          <el-input
            v-model="infoForm.case_id"
            placeholder="点击选择推荐案例编号...多个商品请用逗号( , )隔开"
          ></el-input>
          <span style="cursor: pointer;color: #34a1e0;" @click="openCaseView">点这里快速选择案例</span>
        </el-form-item>
        <el-form-item label="案例" prop="case_id" v-else>
         <ul class="case_list">
           <li class="case_item" v-for="item in infoForm.case_list" :key="item.case_id">
             <el-image
              style="width: 100px; height: 100px"
              :src="item.image_middle"
              fit="cover"></el-image>
              <p>{{item.case_name}}</p>
              <p>{{item.space}}</p>
           </li>
         </ul>
        </el-form-item>
        <el-form-item v-if="type !== 'details' ">
            <el-button type="primary" @click="confirmClick('infoForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import cases from '@/components/layer-dialog/case-recommend.vue';
export default {
  components:{
    cases
  },
  data() {
    return {
      recommend_case:'',
      is_disabled:false,
      store_stylist_id:'',
      infoForm: {
        image: "",
        name: "",
        style_name: "",
        store_id: "",
        image: "",
        image_middle: "",
        viceImagess:[],
        brief: "",
        code: "",
        sort: "",
        status: 1,
        case_id: "",
        viceImages:""
      },
      infoFormRules: {
        image: [{ required: true, message: '请上传大图' }],
        name: [{ required: true, message: '请填写设计师名字' }],
        style_name: [{ required: true, message: '请填写擅长的风格' }],
        image_middle: [{ required: true, message: '请上传中图' }],
        viceImagess: [{ required: true, message: '请上传设计师图片' }],
        store_id: [{ required: true, message: '请填写店铺ID' }],
        brief: [{ required: true, message: '请填写简介' }],
        code: [{ required: true, message: '请填写标签' }],
        sort: [{ required: true, message: '请填写排序' }],
        status: [{ required: true, message: '请选择状态' }],
        case_id: [{ required: true, message: '请填写案例ID' }],
      },
      type:'add'
    };
  },
  methods: {
    init(){
      let data = {
        store_stylist_id:this.store_stylist_id
      }
      this.$http(this.$ApiList.DesignInfo,data).then(res=>{
        const { case_list, image_list } = res.datas;
        this.infoForm = res.datas;
        if(this.type === 'edit'){
          delete this.infoForm.case_list;
          delete this.infoForm.image_list;
          delete this.infoForm.add_time;
          let case_id = [],viceImagess=[];
          case_list.forEach(item=>{
            case_id.push(item.case_id)
          })
          this.$set(this.infoForm,'case_id',case_id.join(','))
          image_list.forEach(item=>{
            viceImagess.push(item.image)
          })
          this.$set(this.infoForm,'viceImagess',viceImagess)
        }
      })
    },
    // 上传图片
    upload(type,params) {
      const file = params.file,
        isJPGPNG = file.type === 'image/jpeg' || 'image/png',
        isLt1MB = file.size / 1024 <= 10240;
      if (!isJPGPNG) {
        this.$message.error('只能上传图片格式png、jpg!');
        return;
      }
      if (!isLt1MB) {
        this.$message.error('图片不能大于10M');
        return;
      }

      let image = new FormData();
      image.append('file[]', file);

      this.$http(this.$ApiList.publicUpload, image).then(res => {
        if(type === 'big'){
          this.infoForm.image = res.datas[0];
        }else if(type === 'centre'){
          this.infoForm.image_middle = res.datas[0];
        }else if(type === 'stylist'){
          this.infoForm.viceImagess.push(res.datas[0]);
        }
      });
    },
    // 提交
    confirmClick(formName){
      this.$refs[formName].validate(valid=>{
        if(valid){
          this.infoForm.viceImages = this.infoForm.viceImagess.join(',');
          delete this.infoForm.viceImagess;
          if(this.type === 'add'){
            this.$http(this.$ApiList.AddDesign,this.infoForm).then(res=>{
              this.$message.success(res.datas);
              this.$router.push({path:"/design_list",query:{store_id:this.infoForm.store_id}});
              this.$refs[formName].resetFields();
              
            })
          }else if(this.type === 'edit'){
            this.$http(this.$ApiList.UpDesign,this.infoForm).then(res=>{
              this.$message.success(res.datas);
              this.$router.push({path:"/design_list",query:{store_id:this.infoForm.store_id}});
              this.$refs[formName].resetFields();
            })
          }
        }else{
          this.$message.error('请填写完整信息后提交');
        }
      })
    },
    // 打开案例弹窗
    openCaseView(){
      this.$layer.iframe({
        title:"选择案例",
        maxmin:true,
        area:['50%','60%'],
        content:{
          content:cases,
          parent:this,
          data:{
            recommend_case:this.recommend_case,
            store_id:this.infoForm.store_id
          }
        }
      })
    },
    // 选中案例
    setGoodsId(ids) {
      this.infoForm.case_id = ids;
      this.recommend_case = ids;
    },
    // 重置
    reset(type){
      if(type === 'image'){
        this.infoForm.image = '';
      }else if(type === 'image_middle'){
        this.infoForm.image_middle = '';
      }
    },
    // 删除当前一个图片
    onDelImage(index){
      this.infoForm.viceImagess.splice(index,1)
    }
  },
  created () {
    if(this.$route.query.store_id){
      this.infoForm.store_id = this.$route.query.store_id;
      this.is_disabled = true;
      this.type = 'add'
    }
    if(this.$route.query.store_stylist_id){
      this.store_stylist_id = this.$route.query.store_stylist_id;
      let type = this.$route.query.type
      this.is_disabled = true;
      if(type === 'edit'){
        this.type = 'edit'
      }else{
        this.type = 'details'
      }
      this.init();
    }
  }
};
</script>

<style lang="scss" scoped>
.add_design{
    .form{
        width: 600px;
        .avatar{
          flex-shrink: 0;
          margin-right: 10px;
          margin-bottom: 10px;
        }
    }
    .vice-image{
      width: 100%;
      display: flex;
      .item-image{
        position: relative;
        margin-right: 10px;
        .el-icon-error{
          position: absolute;
          top: -6px;
          right: -6px;
          z-index: 99;
          color: crimson;
          font-size: 22px;
          cursor: pointer;
        }
      }
      
    }
    .case_list{
      display: flex;
      flex-wrap: wrap;
      .case_item{
        margin-right: 20px;
        margin-bottom: 20px;
        width: 100px;
        background-color: #f9f9f9;
        padding-bottom: 10px;
        p{
          height: 20px;
          padding: 0 4px;
          font-size: 14px;
          line-height: 20px !important;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
}
</style>